import React from 'react';
import './03-父到子-练习.css';

export class App extends React.Component {
  // 组件状态（数据）
  state = {
    list: [
      {
        id: 1,
        name: '超级好吃的棒棒糖',
        price: 18.8,
        info: '开业大酬宾，全场8折',
      },
      {
        id: 2,
        name: '超级好吃的大鸡腿',
        price: 34.2,
        info: '开业大酬宾，全场8折',
      },
      {
        id: 3,
        name: '超级无敌的冰激凌',
        price: 14.2,
        info: '开业大酬宾，全场8折',
      },
    ],
  };

  render() {
    return (
      // 父组件
      <div className="parent">
        <h1>父组件</h1>
        {/* 把下面UI抽离为子组件 */}
        {this.state.list.map((item) => {
          //   <Child
          //     key={item.id}
          //     id={item.id}
          //     name={item.name}
          //     price={item.price}
          //     info={item.info}
          //   />
          //   组件传值的时候，可以展开对象传递
          //   <Child key={item.id} {...item} />

          const { name, ...other } = item;

          return <Child key={item.id} title={name} {...other} />;
        })}
      </div>
    );
  }
}

// 函数组件
function Child(props) {
  return (
    <div className="child">
      <div className="product">
        <h3>标题：{props.title}</h3>
        <div>价格：{props.price}</div>
        <div>开业大酬宾{props.info}</div>
      </div>
    </div>
  );
}

// 类组件
// class Child extends React.Component {
//   render() {
//     return (
//       <div className="child">
//         <div className="product">
//           <h3>标题：{this.props.name}</h3>
//           <div>价格：{this.props.price}</div>
//           <div>开业大酬宾{this.props.info}</div>
//         </div>
//       </div>
//     );
//   }
// }

export default App;
